<template>
  <section class="teaCircle">
      <vheader title="茶友圈"
      showleft='true'
      @faleft="clickLeft">
      </vheader>
      <main class="teacircle-main">
        <pic :draw="pictures"></pic>
        <ul class="teacircle-main-navc">
          <li class="teacircle-main-navc-item">最新</li>
          <li class="teacircle-main-navc-item">最热</li>
          <li class="teacircle-main-navc-item">关注</li>
        </ul>
        <bar/>
        <section class="teacircle-main-circle">
          <new-circle v-for="(newItem,newIndex) in circleFriends" 
          :newCircle="newItem"
          :key="newIndex">
          </new-circle>
        </section>
      </main>
      <vfoot></vfoot>
  </section>
</template>
<script>
import header from "../../components/header/header";
import pic from "./pic/pic";
import bar from "../../components/bar/bar";
import newCircle from "./newCircle/newCircle";
import foot from "../../components/foot/foot";
export default {
  name:'teaCircle',
  components:{
    vheader:header,
    pic,
    bar,
    newCircle,
    vfoot:foot,
  },
  data(){
    return {
      pictures:{
          itemPic:require('./tea-cricle.png')
      },
      circleFriends:[
        {
          thumb:require('./tea-circle2.png'),
          name:"明泉",
          time:"2017-01-8",
          text:"茶汤浅金黄,明亮度高.香气深厚,紧紧裹住茶汤,茶汤及高度<br>\
                的鲜甜,清晰的苦感和少量的涩感增加了这款茶的丰富层次,而<br>\
                丝毫不影响协调,苦入口能瞬间化开,涩迅速化开,舌面和舌尖生<br>\
                津不断；喉咙香气,回甘盛,清凉感增强",
          drawing:[
            {pict:require('./tea-circle3.png')},
            {pict:require('./tea-circle4.png')},
            {pict:require('./tea-circle5.png')},            
          ]
        },
        {
          thumb:require('./tea-circle2.png'),
          name:"明泉",
          time:"2017-01-8",
          text:"茶汤浅金黄,明亮度高.香气深厚,紧紧裹住茶汤,茶汤及高度<br>\
                的鲜甜,清晰的苦感和少量的涩感增加了这款茶的丰富层次,而<br>\
                丝毫不影响协调,苦入口能瞬间化开,涩迅速化开,舌面和舌尖生<br>\
                津不断；喉咙香气,回甘盛,清凉感增强",
          drawing:[
            {pict:require('./tea-circle3.png')},
            {pict:require('./tea-circle4.png')},
            {pict:require('./tea-circle5.png')},            
          ]
        }
      ]
    }
  },
  created(){
    console.log(this.friendItem,1111)
  },
  methods: {
    clickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.teacircle-main{
  width: 100%;
  border-top:1px solid #dddddf;
  &-navc{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px2rem(82);
    &-item{
      font-size: px2rem(28);
      color: #333333;
    }
  }
  &-circle{
    width: 100%;
    padding-left: px2rem(25);
    padding-right: px2rem(20);
    padding-top: px2rem(29);
  }
}
</style>